<template>
    <!-- style="z-index: 0;" -->
    <div class="fullscreen screen-bg-style" element-loading-background="rgba(0, 0, 0, 0.2)" v-loading="loaded">
        <div class="flex column full-width full-height q-pa-sm q-px-md">
            <div class="grid-container full-width full-height">
                <div class="left-column">
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md">
                            <span slot="title" class="gradient-title">近30天出库单数</span>
                            <OutBy30 :chartData="out_30" slot="default"></OutBy30>
                        </BoxCard>
                    </div>
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md">
                            <span slot="title" class="gradient-title">近30天出入库件数</span>
                            <OrderBy30 :chartData="order_30" slot="default"></OrderBy30>
                        </BoxCard>
                    </div>
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md">
                            <span slot="title" class="gradient-title">发货订单数</span>
                            <SendStock :chartData="send_stock" slot="default"></SendStock>
                        </BoxCard>
                    </div>
                </div>
                <div class="right-column">
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md">
                            <DataScreen :params="base_info" slot="default"></DataScreen>
                        </BoxCard>
                    </div>
                    <div class="q-pa-sm">
                        <BoxCard class="full-width full-height q-pa-md">
                            <span slot="title" class="gradient-title">未发订单产品件数</span>
                            <StoreSalesRanking :chartData="spu_info" slot="default"></StoreSalesRanking>
                        </BoxCard>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BoxCard from './components/BoxCard'
import OutBy30 from './components/OutBy30'
import OrderBy30 from './components/OrderBy30'
import SendStock from './components/SendStock'
import DataScreen from './components/DataScreen'
import StoreSalesRanking from './components/StoreSalesRanking'
import { queryOrderReportDataScreenReport } from '@/api/orderReportDataScreen'

export default {
    name: 'data-screen',
    components: {
        BoxCard,
        OutBy30,
        OrderBy30,
        SendStock,
        DataScreen,
        StoreSalesRanking,
    },
    data() {
        return {
            loaded: true,
            base_info: {
                out_order_quantity: undefined,
                out_inventory_quantity: undefined,
                out_order_quantity_month: undefined,
                out_inventory_quantity_month: undefined,
                in_inventory_quantity: undefined,
                in_inventory_quantity_month: undefined,
                last_buy_quantity: undefined,
                last_arrive_quantity: undefined,
                long_not_send_date: undefined,
                long_have_send_date: undefined,
            },
            out_30: [],
            order_30: [],
            send_stock: {},
            spu_info: [],
        }
    },
    mounted() {
        this.getData()
        // setInterval(() => {
        //     this.getData('refresh')
        // }, 3000)
    },
    methods: {
        getData(type) {
            if (type !== 'refresh') {
                this.loaded = true
            }
            queryOrderReportDataScreenReport()
                .then(res => {
                    this.base_info = res.data.base_info
                    this.out_30 = res.data.out_30
                    this.order_30 = res.data.order_30
                    this.send_stock = res.data.send_stock
                    this.spu_info = res.data.spu_info
                })
                .finally(() => {
                    this.loaded = false
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.screen-bg-style {
    background: rgb(16, 25, 80) !important;
    color: #fff;
}

.screen-header {
    background: url('./assets/img/sreen_title_bg.png') no-repeat;
    background-size: 100% 100%;
    padding: 1.5% 1%;
    position: relative;
}
.screen-title {
    margin: 0 auto;
    font-size: 26px;
    font-weight: bold;
    color: rgba(1, 196, 247, 1);
    line-height: 28px;
    text-align: center;
}
.screen-search {
    position: absolute;
    right: 1%;
    top: 45%;
}

.gradient-title {
    background: linear-gradient(0deg, rgba(4, 119, 213, 1) 0%, rgba(1, 217, 254, 1) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 左右两列宽度比例为1:2 */
    gap: 8px; /* 列之间的间隔 */
    padding: 8px 0;
}

.left-column {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr; /* 左列有三行，高度1:1:1 */
    gap: 8px; /* 行之间的间隔 */
}
.right-column {
    display: grid;
    grid-template-rows: 2fr 3fr; /* 右侧列有两行，高度 2:3 */
    gap: 8px; /* 行之间的间隔 */
}

.el-table {
    background: transparent !important;
}
//<=768的设备
@media only screen and (max-width: 768px){ 
    .grid-container {
        overflow: auto;
        // grid-template-rows: auto auto;
    }
    .left-column {
        width: 80vw;
        
    }
    
    .right-column {
        width: 160vw;
    }
    .count-title {
        margin-bottom: 24px;
    }
 }
</style>
